<!-- pages/food/user.vue -->
<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
      <text class="title">校园外卖</text>
      <text class="location">当前位置：{{ currentLocation }}</text>
    </view>

    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-box">
        <image src="/static/search-icon.png" class="search-icon"></image>
        <input 
          type="text" 
          placeholder="搜索餐厅或商品" 
          v-model="searchKeyword"
          @confirm="search"
        >
      </view>
      <text class="filter-btn" @click="showFilter">筛选</text>
    </view>

    <!-- 分类导航 -->
    <scroll-view class="category-scroll" scroll-x>
      <view 
        class="category-item" 
        :class="{ active: currentCategory === index }"
        v-for="(item, index) in categories" 
        :key="index"
        @click="switchCategory(index)"
      >
        {{ item.name }}
      </view>
    </scroll-view>

    <!-- 商家列表 -->
    <view class="restaurant-list">
      <view class="restaurant-item" v-for="(item, index) in restaurantList" :key="index" @click="goToRestaurant(item.id)">
        <image class="restaurant-img" :src="item.image"></image>
        <view class="restaurant-info">
          <view class="info-top">
            <text class="name">{{ item.name }}</text>
            <text class="rating">{{ item.rating }}分</text>
          </view>
          <view class="info-middle">
            <text class="delivery-time">{{ item.deliveryTime }}分钟</text>
            <text class="distance">{{ item.distance }}km</text>
            <text class="min-price">起送￥{{ item.minPrice }}</text>
          </view>
          <view class="info-bottom">
            <text class="tag" v-for="(tag, idx) in item.tags" :key="idx">{{ tag }}</text>
          </view>
        </view>
        <view class="delivery-fee">
          <text>配送费</text>
          <text class="fee">￥{{ item.deliveryFee }}</text>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      currentLocation: '学生公寓1栋',
      searchKeyword: '',
      currentCategory: 0,
      categories: [
        { id: 0, name: '全部' },
        { id: 1, name: '快餐便当' },
        { id: 2, name: '奶茶饮品' },
        { id: 3, name: '水果生鲜' },
        { id: 4, name: '超市便利' },
        { id: 5, name: '甜点蛋糕' }
      ],
      restaurantList: [
        {
          id: 1,
          name: '香锅冒菜',
          image: '/static/restaurant1.jpg',
          rating: 4.8,
          deliveryTime: 30,
          distance: 0.5,
          minPrice: 15,
          deliveryFee: 2,
          tags: ['新店特惠', '满减优惠']
        },
        {
          id: 2,
          name: '快乐炸鸡',
          image: '/static/restaurant2.jpg',
          rating: 4.6,
          deliveryTime: 25,
          distance: 0.3,
          minPrice: 20,
          deliveryFee: 3,
          tags: ['爆款推荐', '第二份半价']
        }
      ]
    };
  },
  methods: {
    // 切换分类
    switchCategory(index) {
      this.currentCategory = index;
      this.loadRestaurants(index);
    },
    
    // 搜索功能
    search() {
      if (!this.searchKeyword.trim()) return;
      // 执行搜索逻辑
    },
    
    // 显示筛选面板
    showFilter() {
      uni.showActionSheet({
        itemList: ['距离最近', '评分最高', '起送价最低', '配送费最低'],
        success: (res) => {
          // 处理筛选逻辑
        }
      });
    },
    
    // 进入餐厅详情
    goToRestaurant(id) {
      uni.navigateTo({
        url: `/pages/food/restaurant?id=${id}`
      });
    },
    
    // 发布跑腿需求
    publishTask() {
      uni.navigateTo({
        url: '/pages/food/publish'
      });
    },
    
    // 加载商家列表
    loadRestaurants(categoryId) {
      // 模拟加载数据
    }
  }
};
</script>

<style lang="scss">
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  padding: 30rpx 24rpx;
  background-color: #fff;
  border-bottom: 2rpx solid #f5f5f5;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 12rpx;
  }
  
  .location {
    font-size: 24rpx;
    color: #666;
    display: flex;
    align-items: center;
    
    &::after {
      content: '';
      display: inline-block;
      width: 16rpx;
      height: 16rpx;
      margin-left: 12rpx;
      // background-image: url('/static/arrow-down.png');
      background-size: cover;
    }
  }
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background-color: #fff;
  
  .search-box {
    flex: 1;
    height: 72rpx;
    background-color: #f5f5f5;
    border-radius: 36rpx;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    
    .search-icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 16rpx;
    }
    
    input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
    }
  }
  
  .filter-btn {
    font-size: 28rpx;
    color: #666;
    margin-left: 24rpx;
  }
}

.category-scroll {
  white-space: nowrap;
  padding: 24rpx 0;
  background-color: #fff;
  
  .category-item {
    display: inline-block;
    padding: 12rpx 24rpx;
    font-size: 28rpx;
    color: #666;
    margin: 0 12rpx;
    
    &.active {
      color: #ff6600;
      font-weight: bold;
      border-bottom: 4rpx solid #ff6600;
    }
  }
}

.restaurant-list {
  padding: 24rpx;
}

.restaurant-item {
  display: flex;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .restaurant-img {
    width: 160rpx;
    height: 160rpx;
    border-radius: 12rpx;
    margin-right: 24rpx;
  }
  
  .restaurant-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    .info-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .rating {
        font-size: 24rpx;
        color: #ff9500;
        display: flex;
        align-items: center;
      }
    }
    
    .info-middle {
      display: flex;
      align-items: center;
      color: #666;
      font-size: 24rpx;
      margin: 12rpx 0;
      
      .delivery-time, .distance {
        margin-right: 24rpx;
      }
    }
    
    .info-bottom {
      display: flex;
      flex-wrap: wrap;
      gap: 8rpx;
      
      .tag {
        font-size: 20rpx;
        color: #ff6600;
        background-color: #fff0e6;
        padding: 4rpx 8rpx;
        border-radius: 4rpx;
      }
    }
  }
  
  .delivery-fee {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    
    text {
      font-size: 22rpx;
      color: #666;
    }
    
    .fee {
      font-size: 28rpx;
      font-weight: bold;
      color: #ff6600;
    }
  }
}

.publish-btn {
  position: fixed;
  bottom: 60rpx;
  right: 60rpx;
  width: 120rpx;
  height: 120rpx;
  background-color: #ff6600;
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28rpx;
  box-shadow: 0 6rpx 16rpx rgba(255, 102, 0, 0.3);
}
</style>